<template>
<div>
 <el-button @click="create2()">刷新</el-button>
 <el-form :inline="true" :model="searchMap" class="demo-form-inline">
  <el-form-item label="输入搜索">
    <el-input v-model="searchMap.id" placeholder="服务单号"></el-input>
  </el-form-item>
  <el-form-item label="处理状态">
     <el-select v-model="searchMap.status" placeholder="全部">
       <el-option label="全部" value=""></el-option>
      <el-option label="申请" value="0"></el-option>
      <el-option label="同意" value="1"></el-option>
      <el-option label="驳回" value="2"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">查询</el-button>
  </el-form-item>
</el-form>
<el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="服务单号"
      width="150" prop="id">
    </el-table-column>
    <el-table-column
      label="申请时间"
      width="180" prop="applyTime" :formatter="formatDate">
    </el-table-column>
    <el-table-column
      label="用户账号"
      width="120" prop="userId">
    </el-table-column>
    <el-table-column
      label="退款金额"
      width="120" prop="returnMoney">
    </el-table-column>
    <el-table-column
      label="联系人"
      width="120" prop="linkman">
    </el-table-column>
     <el-table-column
      label="申请状态"
      width="100" prop="status">
 <template scope="scope">
     <p v-if="scope.row.status=='0'">申请</p>
    <p v-if="scope.row.status=='1'">同意</p>
    <p v-if="scope.row.status=='2'">驳回</p>
</template>
     </el-table-column>
     <el-table-column
      label="处理时间"
      width="180" prop="disposeTime" :formatter="formatDate">

    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">查看详情</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--分页组件-->
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="pageSizeList"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
  </el-pagination>
</div>
</template>
<script>
export default {
  data () {
    return {
      // 呈现数据
      tableData: [],
      // 当前页码
      currentPage: 1,
      // 页大小
      pageSize: 10,
      // 页大小列表
      pageSizeList: [10, 20, 50, 100],
      // 总记录数
      total: 0,
      // 查询表单对象
      searchMap: {},
      // 控制对话框是否显示的标志
      dialogFormVisible: false,
      // 绑定表单对象
      Form: {},
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      }

    }
  },
  methods: { // 方法区
    formatDate (row, column) {
      // 获取单元格数据
      const data = row[column.property]
      if (data == null) {
        return null
      }
      const dt = new Date(data)
      return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
    },

    async handleEdit (index, row) {
      const fwdid = row.id
      this.$router.push({
        path: '/tkfwd',
        query: {
          id: fwdid
        }
      })
    },
    onSubmit () {
      this.getList()
    }, // 获取品牌信息列表
    async getList () {
      // 发送请求查询数据并返回
      const { data: res } = await this.$http.post(`/orders/return/order/findPage/${this.currentPage}/${this.pageSize}`, this.searchMap)
      this.tableData = res.data.rows
      this.total = res.data.total
    },
    // 页大小改变
    async handleSizeChange (val) {
      this.pageSize = val
      this.getList()
    },
    // 页码改变
    async handleCurrentChange (val) {
      this.currentPage = val
     this.getList()
   },
    async create2() {
     this.getList()
   }
}, // 钩子函数
    async created () {
    this.searchMap = { type: 2 }
    this.getList()
  }
}
</script>
<style>
</style>
